<script>
export default {
  name: 'buildingForm',
  data() {
    return {
      formRef: null,
      formData: {
        name: '',
        floors: '',
        area: '',
        propertyFeePrice: '',
      },
      formRules: {
        name: [
          { required: true, message: '请输入楼宇名称', trigger: 'blur' },
        ],
        floors: [
          { required: true, message: '请输入楼宇层数', trigger: 'blur' },
        ],
        area: [
          { required: true, message: '请输入在管面积', trigger: 'blur' },
        ],
        propertyFeePrice: [
          { required: true, message: '请输入物业费', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    resetFields() {
      this.$refs.formRef.resetFields();
    },
    async fetchBuildingDetail(currentId) {
      const { id, name, floors, area, propertyFeePrice } = await this.$store.dispatch('buildingStore/fetchBuildingDetailAction', currentId);
      this.formData.id = id;
      this.formData.name = name;
      this.formData.floors = floors;
      this.formData.area = area;
      this.formData.propertyFeePrice = propertyFeePrice;
    },
  },
};
</script>

<template>
  <el-form label-width="100px" :model="formData" :rules="formRules" ref="formRef">
    <el-form-item label="楼宇名称" prop="name">
      <el-input placeholder="请输入楼宇名称" v-model="formData.name"></el-input>
    </el-form-item>
    <el-form-item label="楼宇层数" prop="floors">
      <el-input placeholder="请输入楼宇层数" v-model="formData.floors"></el-input>
    </el-form-item>
    <el-form-item label="在管面积" prop="area">
      <el-input placeholder="请输入在管面积" v-model="formData.area">
        <template #append>m²</template>
      </el-input>
    </el-form-item>
    <el-form-item label="物业费" prop="propertyFeePrice">
      <el-input placeholder="请输入物业费" v-model="formData.propertyFeePrice">
        <template #append>元/m²</template>
      </el-input>
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">

</style>
